<template>
	<div>
		<a-row type="flex" justify="end" style="margin: 0 0 20px 0">
			<a-col :span="6">
				<a-button style="margin-left: 4%" type="primary" v-for="(item, index) in list" :key="index"
					@click="showModal(item,index)">{{ item }}</a-button>
			</a-col>
		</a-row>
		<!-- 表格 -->
		<a-table :columns="columns" :data-source="data" bordered align="center" :loading="loading"
			:pagination="pagination">
			<template slot="index" slot-scope="text, record, index">
				{{index + 1}}
			</template>
		</a-table>
		<!-- <a-pagination style="position: fixed; left: 80%; bottom: 5%" size="small" :total="ipagination.total"
			show-size-changer show-quick-jumper v-model="ipagination.current" :pageSize.sync="ipagination.size"
			:pageSizeOptions="ipagination.pageSize" @change="onChange" /> -->

		<a-modal width="80%" :title="title" :visible="visible" @ok="handleOk()" @cancel="handleCancel">
			<template slot="index" slot-scope="text, record, index">
				{{index + 1}}
			</template>
			<a-table :columns="columnsKS" :data-source="dataKS" bordered :loading="loading" :pagination="false">
				<template :slot="col" slot-scope="text, record, index"
					v-for="col in ['reqText','styleReqShape','memo']">
					<div :key="col" v-if="col == 'reqText'">
						<a-select labelInValue style="width: 150px;" @focus="changeReqShape(record.rowNo)"  @change="reqTextListChange">
							<a-select-option v-for="item in reqTextList" :value="item.id" :key="item.id" :title="item.name">
								{{item.name}}
							</a-select-option>
						</a-select>
					</div>
					<div :key="col" v-if="col == 'styleReqShape'">
						<a-select style="width: 150px;" @focus="clickReqShape(record.rowNo)"  labelInValue  @change="ReqShapeChange" :filter-option="false" label-in-value>
							<a-select-option v-for="item in detailReqList" :value="item.reqCode" :key="item.reqCode" :title="item.reqText">
								{{item.reqText}}
							</a-select-option>
						</a-select>
					</div>
					<div :key="col" v-if="col == 'memo'">
						 <a-input placeholder="备注"  @change="e => changeMemo(e.target.value, record.colourid, col)" />
					</div>
				</template>
			</a-table>
		</a-modal>
	</div>
</template>
<script>
	import {
		getNewStyleRequire,
		getNewStyleRequireDet,
		getStyleDetailReq,
		saveAndUpdateNewStyleRequire
	} from '@api/spection/index'
import { getDictChildList } from '@api/rd/index'
	export default {
		data() {
			return {
				username: JSON.parse(localStorage.getItem('pro__Login_Userinfo')),
				list: ['编辑用线', '编辑裁剪要求', '编辑普通工艺'],
				value: '',
				index: '',
				title:'',
				data: [],
				pagination: false,
				columns: [{
						title: '序号',
						key: 'index',
						dataIndex: 'index',
						align: 'center',
						scopedSlots: {
							customRender: 'index'
						},
					},
					{
						title: '款式要求大类',
						key: 'reqTypeText',
						dataIndex: 'reqTypeText',
						align: 'center'
					},
					{
						title: '款式要求明细',
						dataIndex: 'reqText',
						key: 'reqText',
						align: 'center'
					},
					{
						title: '款式要求形式',
						dataIndex: 'styleReqShape',
						key: 'styleReqShape',
						align: 'center'
					},
					{
						title: '备注',
						key: 'memo',
						dataIndex: 'memo',
						align: 'center'
					}
				],
				loading: false,
				ipagination: {
					current: 1,
					size: 10,
					pageSize: ['10', '20', '30', '40'],
					total: 50
				},
				visible: false,
				columnsKS: [{
						title: '序号',
						key: 'index',
						dataIndex: 'index',
						align: 'center',
						scopedSlots: {
							customRender: 'index'
						},
					},
					{
						title: '款式要求大类',
						key: 'reqTypeText',
						dataIndex: 'reqTypeText',
						align: 'center'
					},
					{
						title: '款式要求形式',
						dataIndex: 'styleReqShape',
						key: 'styleReqShape',
						align: 'center',
						scopedSlots: {
							customRender: 'styleReqShape'
						},
					},
					{
						title: '款式要求明细',
						dataIndex: 'reqText',
						key: 'reqText',
						align: 'center',
						scopedSlots: {
							customRender: 'reqText'
						},
					},
					{
						title: '备注',
						key: 'memo',
						dataIndex: 'memo',
						align: 'center',
						scopedSlots: {
							customRender: 'memo'
						},
					}
				],
				dataKS: [],
				reqTextList:[],
				clickRow:{},
				detailReqList:[]
			}
		},
		created() {
			this.getlist()
			this.getDictChildList()
		},
		methods: {
			changeMemo(rowVal, rowId, rowkey){
				this.clickRow.memo = rowVal
			},
			ReqShapeChange(i){
				this.clickRow.reqText = i.label.trim()
				this.clickRow.reqType = i.key
			},
			clickReqShape(id){
				this.getStyleDetailReq(id)
			},
			reqTextListChange(i){
				this.clickRow.styleReqShape = i.label.trim()
				this.clickRow.styleReqShapeCode = i.key
			},
			changeReqShape(rowId){
				const newData = [...this.dataKS]
				const target = newData.find(item => rowId === item.rowNo);
				this.clickRow = target
			},
			async saveAndUpdateNewStyleRequire(){
				let data = []
				this.dataKS.forEach(el => {
					if(el.styleReqShape != ''){
						el.username = this.username.value.phone
						el.jobNumber = this.username.value.workNo
						el.roleCodeList = this.username.value.roleCode
						data.push(el)
					}
				})
				let params = {
					styleRequireDtoList:data
				}
				await saveAndUpdateNewStyleRequire(params).then(res => {
					if (res.code == 200) {
						console.log(res)
						this.$message.success('编辑成功')
					} else {
					  if (res.msg) {
						this.$message.error(res.msg)
					  } else {
						this.$message.error('获取列表失败！')
					  }
					}
				})
			},
			async getStyleDetailReq(id){
				let params = {
					reqType:id
					// reqText:this.clickRow.reqText
				}
				const res = await getStyleDetailReq(params).then(res => {
					if (res.code == 200) {
						console.log(res)
					  this.detailReqList = res.data
					} else {
					  if (res.msg) {
						this.$message.error(res.msg)
					  } else {
						this.$message.error('获取列表失败！')
					  }
					}
				})
			},
			async getDictChildList() {
			  const params = {
			    name: 'SAMPLE_REQUIRE_XS'
			  }
			const res = await getDictChildList('dict', params).then(res => {
				if (res.code == 200) {
					console.log(res)
				  this.reqTextList = res.data
				} else {
				  if (res.msg) {
					this.$message.error(res.msg)
				  } else {
					this.$message.error('获取列表失败！')
				  }
				}
			})
		  
			},
			async getNewStyleRequireDet(type) {
				const data = {
					billNo: this.$route.query.billNo,
					type: type
				}
				await getNewStyleRequireDet(data).then(res => {
					if (res.code == 200) {
						this.dataKS = res.data
					} else {
						this.$message.error(res.msg)
					}
				})
			},
			showModal(title, index) {
				if (title == '编辑用线') {
					this.visible = true
					this.index = index
					this.title = title
				} else if (title == '编辑裁剪要求') {
					this.visible = true
					this.index = index
					this.title = title
				} else {
					this.visible = true
					this.index = index
					this.title = title
				}
				this.getNewStyleRequireDet(index)
			},
			async getlist() {
				await getNewStyleRequire(this.$route.query.billNo).then(res => {
					if (res.code == 200) {
						this.data = res.data
						console.log(res.data)
					} else {
						this.$message.error(res.msg)
					}
				})
			},
			// 页码以及条数
			onChange(current, pageSize) {
				console.log(current, pageSize)
				this.current = current
			},
			handleOk() {
				if (this.title == '编辑用线') {
					this.visible = false
				} else if (this.title == '编辑裁剪要求') {
					this.visible = false
				} else {
					this.visible = false
				}
				this.saveAndUpdateNewStyleRequire()
			},
			handleCancel(e) {
				this.visible = false
			},
			handleChangee(e, w) {
				console.log(e, w)
			},
			handleChange(value) {
				console.log(`selected ${value}`)
			},
			handleBlur() {
				console.log('blur')
			},
			// 获得焦点时回调
			handleFocus() {
				console.log('focus')
			},
			filterOption(input, option) {
				return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
			}
		}
	}
</script>
<style scoped lang="less">
	::v-deep .ant-table-thead>tr>th {
		background: #acd3fc;
	}
</style>